<template>
    <el-row>
        <el-col :span="24">
        <el-form :inline="true">

          <el-form-item><el-button size="small" type="primary" @click="exportExcel">导出</el-button></el-form-item>
          <el-form-item><el-button size="small" type="primary" @click="CreateOneFormPage">打印</el-button></el-form-item>


          <el-form-item>
            <el-radio-group @change="getBusinessDayIncome()" v-model="dataForm.dayType" size="small">
              <!-- <el-radio-button label="全部"></el-radio-button> -->
              <el-radio-button label="自然日"></el-radio-button>
              <el-radio-button label="营业日"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-radio-group @change="getBusinessDayIncome()" v-model="dataForm.selDateAdd" size="small">
              <!-- <el-radio-button label="全部"></el-radio-button> -->
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="昨日"></el-radio-button>
              <el-radio-button label="本周"></el-radio-button>
              <el-radio-button label="其他"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="dataForm.selDateAdd == '其他'">
            <el-date-picker v-if="dataForm.dayType=='营业日'" size="small" @change="getBusinessDayIncome()" v-model="dataForm.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"></el-date-picker>
            <el-date-picker v-if="dataForm.dayType=='营业日'" size="small" @change="getBusinessDayIncome()" v-model="dataForm.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"></el-date-picker>
            <el-date-picker v-if="dataForm.dayType=='自然日'" size="small" @change="getBusinessDayIncome()" v-model="dataForm.startDateTime" value-format="yyyy-MM-dd" type="date" placeholder="开始日期"></el-date-picker>
            <el-date-picker v-if="dataForm.dayType=='自然日'" size="small" @change="getBusinessDayIncome()" v-model="dataForm.endDateTime" value-format="yyyy-MM-dd" type="date" placeholder="结束日期"></el-date-picker>
          </el-form-item>

          <!-- <el-popover
            placement="top"
            width="160"
            v-model="visible">
            <div style=" margin: 0">
                <template v-for="(item,key) in selectedColumn" >
                    <el-checkbox v-model="columns[key]" :key="key">{{key}}</el-checkbox>
                </template>
                <el-checkbox-group v-model="column" @change="columnChange">
                    <el-checkbox v-for="(item,index) in columns" :label="index" :key="index"> {{index}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <el-button slot="reference" size="small" style="margin-top: 2px;float: right;">选择列</el-button>
            </el-popover>

            <el-form-item>
                <el-button @click="getDataList()" size="small">查询</el-button>
            </el-form-item> -->
        </el-form>
        </el-col>

        <el-table
          border
          style="width: 100%"
          :data="tableData"
          id='tableData'
        >
        <el-table-column
          prop="name"
          label="统计项目"
        >
        <template slot-scope="scope">
          <template>
            {{scope.row.name}}
          </template>
        </template>
        </el-table-column>
        <el-table-column
          prop="todayIncome"
          :label="dataForm.selDateAdd+'发生'"
        >
        <template slot-scope="scope">
        <template v-if="scope.row.type&&scope.row.type!='ces'">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="accountsShow('4','')">{{scope.row.todayIncome}}</el-link>
          </template>
          <template  v-else-if="scope.row.nowType">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="accountsShow('',scope.row.name)">{{scope.row.todayIncome}}</el-link>
          </template>
          <template v-else-if="scope.row.id&&scope.row.type!='ces'">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="getleim(scope.row.id)">{{scope.row.todayIncome}}</el-link>
          </template>
          <template v-else-if="scope.row.id&&scope.row.type=='ces'">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="getleimu(scope.row.id)">{{scope.row.todayIncome}}</el-link>
          </template>
          <template  v-else-if="scope.row.name=='非住客账'">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="noninoutDataDetail">{{scope.row.todayIncome}}</el-link>
          </template>

          <template  v-else-if="scope.row.name=='红冲'">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="accountsShow('9','')">{{scope.row.todayIncome}}</el-link>
          </template>

          <template  v-else-if="scope.row.name=='优惠金额'">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="accountsShow('13','')">{{scope.row.todayIncome}}</el-link>
          </template>
<!--          <template  v-else-if="scope.row.name=='现付账'">
            <el-link type="primary" style="color:#17B3A3" :underline="false" @click="cashBillsDataDetail">{{scope.row.todayIncome}}</el-link>
          </template> -->
          <template  v-else>
            {{scope.row.todayIncome}}
          </template>
        </template>
        </el-table-column>

        <el-table-column
        prop="company"
          label="单位"
        >
        </el-table-column>
        <el-table-column
        prop="toMonthIncome"
          label="本月累计"
        >
        </el-table-column>
        <el-table-column
          label="本年累计"
          prop="toYearIncome"
        >
        </el-table-column>
        <el-table-column
          label="去年同日"
          prop="lastDayIncome"
        >
        </el-table-column>
        <el-table-column
          label="去年同月"
          prop="lastMonthIncome"
        >
        </el-table-column>
        <!-- <el-table-column
          label="去年同期"
        >
        </el-table-column> -->
        </el-table>
        <accountData v-if="accountDataVisible" ref="accountData"></accountData>
        <cashBillsData v-if="cashBillsDataVisible" ref="cashBillsData"></cashBillsData>
        <noninoutData v-if="noninoutDataVisible" ref="noninoutData"></noninoutData>
        <commodityData v-if="commodityDataVisible" ref="commodityData"></commodityData>
        <leimuData v-if="leimuDataVisible" ref="leimuData"></leimuData>
    </el-row>

</template>
<script>
import moment from 'moment'
import accountData from './accounts'
import commodityData from './commodity'
import leimuData from './leimu'
import cashBillsData from './cashBillsList'
import noninoutData from './nonInoutList'
import FileSaver from "file-saver";
import XLSX from "xlsx";
import print from 'print-js'
import $ from 'jquery'
export default {

    data() {
        return {
              dataForm: {
                startDate: '',
                endDate: '',
                startDataTime:'',
                endDateTime:'',
                selDateAdd: '今日',
                key:'',
                dayType:'自然日'
              },
              tableData:[],
              accountDataVisible:false,
              cashBillsDataVisible: false,
              noninoutDataVisible:false,
              commodityDataVisible:false,
              leimuDataVisible:false,
              seller:''
        }
    },
    components:{accountData,cashBillsData,noninoutData,commodityData,leimuData},
    methods:{
      getleimu(id) {

        this.leimuDataVisible = true
          var startTime = new Date();
          var endTime = new Date();
          if (this.dataForm.selDateAdd == '今日') {
              startTime = moment().format("YYYY-MM-DD");
              endTime = moment().format("YYYY-MM-DD");
          }
          if (this.dataForm.selDateAdd == '昨日') {
              startTime = moment().subtract(1, "days").format("YYYY-MM-DD");
              endTime = moment().subtract(1, "days").format("YYYY-MM-DD");
          }
          if (this.dataForm.selDateAdd == '本周') {
              startTime = moment().day("Monday").format("YYYY-MM-DD");
              endTime = moment().day("Monday").day(+7).format("YYYY-MM-DD");
          }
          if (this.dataForm.selDateAdd == '其他') {
            console.log(this.dataForm.startDate)
            startTime = this.dataForm.dayType == '营业日' ? this.dataForm.startDate : this.dataForm.startDateTime
            endTime = this.dataForm.dayType == '营业日' ? this.dataForm.endDate : this.dataForm.endDateTime
          }
          if (startTime == '' || startTime == undefined) {
            startTime = moment().format('2000-12:12')
          }
          if (endTime == '' || startTime == undefined) {
            endTime = moment().format('2099-12:12')
          }
          console.log(startTime,endTime)
          this.$nextTick(()=>{
              this.$refs.leimuData.init(startTime,endTime,id)
          })
      },
      getleim(id) {
        this.commodityDataVisible = true
          var startTime = new Date();
          var endTime = new Date();
          if (this.dataForm.selDateAdd == '今日') {
              startTime = moment().format("YYYY-MM-DD");
              endTime = moment().format("YYYY-MM-DD");
          }
          if (this.dataForm.selDateAdd == '昨日') {
              startTime = moment().subtract(1, "days").format("YYYY-MM-DD");
              endTime = moment().subtract(1, "days").format("YYYY-MM-DD");
          }
          if (this.dataForm.selDateAdd == '本周') {
              startTime = moment().day("Monday").format("YYYY-MM-DD");
              endTime = moment().day("Monday").day(+7).format("YYYY-MM-DD");
          }
          if (this.dataForm.selDateAdd == '其他') {
            console.log(this.dataForm.startDate)
            startTime = this.dataForm.dayType == '营业日' ? this.dataForm.startDate : this.dataForm.startDateTime
            endTime = this.dataForm.dayType == '营业日' ? this.dataForm.endDate : this.dataForm.endDateTime
          }
          if (startTime == '' || startTime == undefined) {
            startTime = moment().format('2000-12:12')
          }
          if (endTime == '' || startTime == undefined) {
            endTime = moment().format('2099-12:12')
          }
          console.log(startTime,endTime)
          this.$nextTick(()=>{
              this.$refs.commodityData.init(startTime,endTime,id)
          })
      },
      getBusinessDayIncome() {

            this.$http({
            url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinaccounting/getBusinessDayIncome'),
            method: 'get',
            params: this.$http.adornParams({
                    selDateAdd: this.dataForm.selDateAdd,
                    startDate: this.dataForm.dayType == '营业日' ? this.dataForm.startDate : this.dataForm.startDateTime,
                    endDate:this.dataForm.dayType == '营业日' ? this.dataForm.endDate : this.dataForm.endDateTime,
                    dayType:this.dataForm.dayType
                })
        }).then(({ data }) => {
            if (data && data.code === 0) {
                this.tableData = data.list
            } else {

            }
        })
      },
      getSellerAndUser() {
            this.$http({
            url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinaccounting/getUserAndSeller'),
            method: 'get'
        }).then(({ data }) => {
            if (data && data.code === 0) {
                this.seller = data.sellerName
            console.log(data)
            } else {

            }
        })
      },
      accountsShow(payType,nowType) {

        this.accountDataVisible = true
        var startTime = new Date();
        var endTime = new Date();
      console.log(nowType)
        if (this.dataForm.selDateAdd == '今日') {
            startTime = moment().format("YYYY-MM-DD 00:00:00");
            endTime = moment().format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '昨日') {
            startTime = moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00");
            endTime = moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '本周') {
            startTime = moment().day("Monday").format("YYYY-MM-DD 00:00:00");
            endTime = moment().day("Monday").day(+7).format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '其他') {
          console.log(this.dataForm.startDate)
          startTime = this.dataForm.dayType == '营业日' ? this.dataForm.startDate : this.dataForm.startDateTime
          endTime = this.dataForm.dayType == '营业日' ? this.dataForm.endDate : this.dataForm.endDateTime
        }
        if (startTime == '' || startTime == undefined) {
          startTime = moment().format('2000-12:12 23:59:59')
        }
        if (endTime == '' || startTime == undefined) {
          endTime = moment().format('2099-12:12 23:59:59')
        }
        console.log(startTime,endTime)
        this.$nextTick(()=>{
            this.$refs.accountData.init(payType,nowType,startTime,endTime)
        })
      },

      noninoutDataDetail() {
        this.noninoutDataVisible = true
        var startTime = new Date();
        var endTime = new Date();
        if (this.dataForm.selDateAdd == '今日') {
            startTime = moment().format("YYYY-MM-DD 00:00:00");
            endTime = moment().format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '昨日') {
            startTime = moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00");
            endTime = moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '本周') {
            startTime = moment().day("Monday").format("YYYY-MM-DD 00:00:00");
            endTime = moment().day("Monday").day(+7).format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '其他') {
          startTime = this.dataForm.dayType == '营业日' ? this.dataForm.startDate : this.dataForm.startDateTime
          endTime = this.dataForm.dayType == '营业日' ? this.dataForm.endDate : this.dataForm.endDateTime
        }
        if (startTime == '' || startTime == undefined) {
          startTime = moment().format('2000-12:12 23:59:59')
        }
        if (endTime == '' || startTime == undefined) {
          endTime = moment().format('2099-12:12 23:59:59')
        }
        this.$nextTick(()=>{
        this.$refs.noninoutData.init(startTime,endTime)
        })
      },
      cashBillsDataDetail() {
        this.cashBillsDataVisible = true
        var startTime = new Date();
        var endTime = new Date();
        if (this.dataForm.selDateAdd == '今日') {
            startTime = moment().format("YYYY-MM-DD 00:00:00");
            endTime = moment().format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '昨日') {
            startTime = moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00");
            endTime = moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '本周') {
            startTime = moment().day("Monday").format("YYYY-MM-DD 00:00:00");
            endTime = moment().day("Monday").day(+7).format("YYYY-MM-DD 23:59:59");
        }
        if (this.dataForm.selDateAdd == '其他') {
          startTime = this.dataForm.dayType == '营业日' ? this.dataForm.startDate : this.dataForm.startDateTime
          endTime = this.dataForm.dayType == '营业日' ? this.dataForm.endDate : this.dataForm.endDateTime
        }
        console.log("开始：",startTime)
        console.log("结束",endTime)
        if (startTime == '' || startTime == undefined) {
          startTime = moment().format('2000-12:12 23:59:59')
        }
        if (endTime == '' || startTime == undefined) {
          endTime = moment().format('2099-12:12 23:59:59')
        }
          this.$nextTick(()=>{
            this.$refs.cashBillsData.init(startTime,endTime)
          })
      },
      exportExcel () {
      /* 从表生成工作簿对象 */

        var fix = document.querySelector('.el-table__fixed');

        console.log('fix:',fix)

        var wb;
        if (fix) {
            wb = XLSX.utils.table_to_book(document.querySelector('#tableData').removeChild(fix));
            document.querySelector('#tableData').appendChild(fix);
        } else {
            wb = XLSX.utils.table_to_book(document.querySelector('#tableData'));
        }

    //   var wb = XLSX.utils.table_to_book(document.querySelector("#tableData"));

      console.log(wb)

      // downloadfn(XLSX.utils.sheet_to_json(wb['Sheets']['Sheet1']), this.config);

      // return

      /* 获取二进制字符串作为输出 */

      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        align: 'center',
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          '营业收入报表(权责发生).xlsx'
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    CreateOneFormPage() {
        var fix = document.querySelector('.el-table__fixed');

        console.log('fix:',fix)

        var wb;
        if (fix) {
            wb = XLSX.utils.table_to_book(document.querySelector('#tableData').removeChild(fix));
        } else {
            wb = XLSX.utils.table_to_book(document.querySelector('#tableData'));
        }
        var footer = '<div id="footer" style="width: 100%;text-align: right;margin-top:20px">' +
        '<span style="margin-right: 20px;">打印时间：' +
        moment(new Date()).format("YYYY-MM-DD HH:mm:ss") +
        '</span>' +
        '<span>打印人：' +
        this.$store.state.user.name +
        '</span>' +
        '</div>';
        $('#tableData').append(footer)
      print({
        printable: 'tableData',
        type: 'html',
        documentTitle:'易信管理平台',
        header: this.seller + '营业收入报表(权责发生)',
        headerStyle: 'text-align:center;color:#f00!important;width:100%;border:1px #000 solid;',
        // targetStyles: ['border', 'padding: 15px'],
        scanStyles: false,
        style: 'table tr td,th { border-collapse: collapse;padding: 15px;border:1px #000 solid;} td{word-wrap:break-word;word-break:break-all;} table{table-layout：fixed;}' // 表格样式
      })

      $('#footer').remove()
    }
    },
    mounted() {
      this.getBusinessDayIncome();
      this.getSellerAndUser();
    }
}
</script>
